<template>
  <div>
    <div class="title">周末去哪儿</div>
    <div class="list" v-for="item of list" :key="item.id">
      <a href="" class="list-link">
        <div class="list-img-cont">
          <img :src="item.imgUrl" class="list-img">
        </div>
        <div class="list-info">
          <p class="list-name">{{item.title}}</p>
          <p class="list-desc">{{item.desc}}</p>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
  padding: .24rem 0
  margin-left: .24rem
  height: .44rem
  font-size: .32rem
  line-height: .44rem
.list
  margin-bottom: .1rem
  background: #fff
  .list-link
    display: block
    width: 100%
    height: 100%
    .list-img-cont
      overflow: hidden
      height: 0
      padding-bottom: 37.8%
      .list-img
        width: 100%
    .list-info
      padding: .14rem .2rem
      .list-name
        color: #212121
        font-size: .28rem
        line-height: .48rem
        ellipsis()
      .list-desc
        color: #616161
        font-size: .24rem
        line-height: .42rem
        ellipsis()
</style>
